<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入文件 -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
</head>

<body>

    <div class="file-upload">
        <span>选择文件</span>
        <input type="file" id="upload" multiple>
    </div>
    <div id="preview"></div>
    <script>
        $(document).ready(function () {
            // 在页面载入完成后执行
            var newDiv = $("<div>").text("拖拽此处添加");
            newDiv.addClass("my-class");
            // 将新的div元素插入到container元素中
            $("#preview").append(newDiv);
        });

        // 保存被点击的图片
        var selectedImageEl = null;
        // 用来标记移动的图片
        var dragStartEl = null;
        var dragEndEl = null;

        function renderImage(file) {
            const reader = new FileReader()
            reader.onload = function (e) {
                if (selectedImageEl) {
                    selectedImageEl.attr({
                        src: e.target.result,
                    })
                    selectedImageEl = null;
                } else {
                    var el = $('<img>')
                    el.on('dragstart', function (e) {
                        // e 触发第一张图片的e e.target 是第一张图片 0
                        dragStartEl = $(e.target)
                        // console.log("开始拖拽", $(e.target).index())
                    })
                        // 鼠标经过了哪 哪里触发
                        .on('dragover', function (e) {
                            if (!dragStartEl) return
                            e.preventDefault()
                            $(this).css('opacity', '0.6')
                            dragEndEl = $(e.target)
                            // console.log("拖拽到什么位置", $(e.target).index())
                        }).on('dragleave', function () {
                            if (!dragStartEl) return
                            $(this).css('opacity', '')
                        }).on('drop', function (e) {
                            if (!dragEndEl) return
                            e.preventDefault()
                        }).on('dragend', function (e) {
                            if (!dragEndEl) return
                            e.preventDefault()
                            dragEndEl.css('opacity', '')
                            // console.log("结束", dragStartEl.index(), dragEndEl.index())
                            if (dragStartEl.index() > dragEndEl.index()) {
                                dragEndEl.before(dragStartEl)
                            } else {
                                dragEndEl.after(dragStartEl)
                            }
                            dragStartEl = null
                            dragEndEl = null
                        })
                    el.attr({
                        src: e.target.result,
                        class: 'preview-image'
                    }).appendTo($('#preview'))
                }
            }
            reader.readAsDataURL(file)
        }
        $('#upload').on('change', function (e) {
            const files = e.target.files
            for (let i = 0; i < files.length; i++) {
                const file = files[i]
                renderImage(file)
            }
        })

        // 拖拽添加
        $('#preview').on('dragover', function (e) {
            e.preventDefault()
            $(this).addClass('dragover')
        }).on('dragleave', function () {
            $(this).removeClass('dragover')
        }).on('drop', function (e) {
            if (dragEndEl) return
            // 阻止事件
            e.preventDefault()
            $(this).removeClass('dragover')
            const files = e.originalEvent.dataTransfer.files
            for (let i = 0; i < files.length; i++) {
                const file = files[i]
                renderImage(file)
            }
        })

        $('#preview').on('click', '.preview-image', function () {
            const img = $(this)
            const index = img.index()
            $('<div>').html('是否要替换或删除该图片？')
                .dialog({
                    title: '操作确认',
                    resizable: false,
                    modal: true,
                    buttons: {
                        '替换': function () {
                            selectedImageEl = img;
                            // 将相应位置的input[type=file]触发点击事件，进行替换上传
                            $('#upload').prop('selectedIndex', index).trigger('click')
                            $(this).dialog('close')
                        },
                        '删除': function () {
                            // 删除对应的图片
                            img.remove()
                            $(this).dialog('close')
                        },
                        '取消': function () {
                            $(this).dialog('close')
                        }
                    }
                })
        })
    </script>

    <style>
        #preview {
            display: flex;
            flex-wrap: wrap;
            background-color: #fff;
            border: 1px solid #e3e3e3;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px 24px;
            margin: 0 auto;
            max-width: 570px;
        }

        .preview-image {
            width: 120px;
            height: 120px;
            margin: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
        }

        .my-class {
            width: 120px;
            height: 120px;
            margin: 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #baf7c9;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
        }

        #preview.dragover {
            background-color: #eee;
        }
    </style>
    <!-- 点击文件按钮样式 -->
    <style>
        .file-upload {
            position: relative;
            overflow: hidden;
            display: inline-block;
            padding: 10px 18px;
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            line-height: 24px;
            transition: background-color 0.3s, border-color 0.3s;
            cursor: pointer;
        }

        .file-upload:hover,
        .file-upload:focus {
            background-color: #0062cc;
            border-color: #005cbf;
        }

        .file-upload input[type="file"] {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-size: 20px;
            opacity: 0;
            cursor: pointer;
        }

        /* .file-upload input[type="file"]:hover,
        .file-upload input[type="file"]:focus {
            outline: none;
        }

        .file-upload input[type="file"]:active {
            transform: scale(0.95);
            box-shadow: none;
        } */
    </style>
</body>

</html>